﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="testMap.css" rel="stylesheet" />
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <div id="location">
        <span>Location</span>
        <form>
            <label for="country">Country: </label>
            <input type="text" id="country" value=" " /><br />
            <label for="city">City: </label>
            <input type="text" id="city" value=" " />
        </form>
        <button id="sun" class="button" onclick="displaySolar()"></button>
        <button id="wind" class="button" onclick="displayWind()"></button>
        <button id="geo" class="button"></button>
    </div>
    <div id="map-canvas"></div>
    
    <script>
        function addOctogon(a, color, map) {

            var poligonCoords = [
                new google.maps.LatLng((42.7 + a), (23.33 + a * 2.4)),
                new google.maps.LatLng((42.7 + a * 2.4), (23.33 + a)),
                new google.maps.LatLng((42.7 + a * 2.4), (23.33 - a)),
                new google.maps.LatLng((42.7 + a), (23.33 - a * 2.4)),
                new google.maps.LatLng((42.7 - a), (23.33 - a * 2.4)),
                new google.maps.LatLng((42.7 - a * 2.4), (23.33 - a)),
                new google.maps.LatLng((42.7 - a * 2.4), (23.33 + a)),
                new google.maps.LatLng((42.7 - a), (23.33 + a * 2.4)),
            ];

            var poligon = new google.maps.Polygon({
                paths: poligonCoords,
                strokeColor: color,
                strokeOpacity: 0.8,
                strokeWeight: 0,
                fillColor: color,
                fillOpacity: 0.2,
            });
            poligon.setMap(map);
        }
        var map;

        function initialize() {
            var map_canvas = document.getElementById('map-canvas');
            var mapOptions = {
                center: new google.maps.LatLng(42.7, 23.33),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            map = new google.maps.Map(map_canvas, mapOptions);
            
        }

        function displaySolar() {
            addOctogon(1, '#fff000', map);
            addOctogon(0.8, '#ff0f00', map);
            addOctogon(0.5, '#ff0000', map);
            //addOctogon(2, '#ff00f0', map);
        }

        function displayWind() {
            addOctogon(2, '#000fff', map);
            addOctogon(1.5, '#00f0ff', map);
            addOctogon(1.2, '#0000ff', map);
            //addOctogon(2, '#ff00f0', map);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        
    </script>
</body>
</html>
